<template>
  <div>
    <el-dialog
      title="机构详情"
      :visible.sync="dialogVisible"
      width="750px"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form
        :model="editForm"
        :rules="rules"
        ref="refForm"
        label-width="100px"
      >
        <el-collapse
          v-model="activeNames"
          @change="handleChange"
          class="el_collapse"
        >
          <el-collapse-item title="基本信息" name="1">
            <!-- <el-form-item size="small" label="上级机构" prop="parentId">
                <TreeSelSearch style="width: 100%;" ref="refTreeSelSearch" @changeOrgId="changeOrgId" :orgName="editOrgInfo.orgName"></TreeSelSearch>
              </el-form-item> -->
                        <el-row>
                            <el-col :span="12">
                                <el-form-item size="small" label="上级机构">
                                    <div class="title" v-if="parentId == 0">无上级</div>
                                    <div class="title" v-else>{{ orgSupInfo.orgName }}</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item size="small" label="上级机构属性">
                                    <div class="title" v-if="parentId == 0">无上级</div>
                                    <div class="title" v-else>{{ orgSupInfo.typeName }}</div>
                                </el-form-item>
                            </el-col>
                        </el-row>

            <el-row v-if="parentId != 0">
              <el-col :span="12">
                <el-form-item size="small" label="上级联系人">
                  <div class="title">{{ orgSupInfo.username }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item size="small" label="上级联系电话">
                  <div class="title">{{ orgSupInfo.mobile }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12"> </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item size="small" label="机构名称">
                  <div class="title">{{ editOrgInfo.orgName }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item size="small" label="机构属性">
                  <div class="title">{{ editOrgInfo.type | orgStatsText }}</div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item size="small" label="负责人姓名">
                  <div class="title">{{ editOrgInfo.username }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item size="small" label="负责人手机号">
                  <div class="title">{{ editOrgInfo.mobile }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item size="small" label="地区">
                  <div class="title">
                    {{ editOrgInfo.province }}{{ editOrgInfo.city
                    }}{{ editOrgInfo.area }}{{ editOrgInfo.street
                    }}{{ editOrgInfo.community }}
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item size="small" label="详细地址">
                  <div class="title">{{ editOrgInfo.address }}</div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item
            title="联网单位信息"
            name="2"
            v-if="editOrgInfo.type == '1'"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item size="small" label="监管类型">
                  <div class="title">
                    {{ editOrgInfo.flatType | flatTypeText }}
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item size="small" label="性质">
                  <div class="title">{{ editOrgInfo.nature | natureText }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item size="small" label="类别">
                  <div class="title">
                    {{ editOrgInfo.category | categoryText }}
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item size="small" label="监管等级">
                  <div class="title">{{ editOrgInfo.grade | gradeText }}</div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import mixinRules from "./mixins/rules.js";
import { mapState } from "vuex";
import $ from "jquery";
import TreeSelSearch from "@components/TreeSelSearch.vue";
import { reqRegion, reqRegionLevel, reqOrgSuperLevelInfo } from "@/api/api";

export default {
  props: ["editOrgInfo"],
  mixins: [mixinRules],
  components: {
    TreeSelSearch,
  },
  data() {
    return {
      orgSupInfo: {
        orgName: "",
        nameSup: "",
        telSup: "",
        personSup: "",
        type: "",
        person: "",
        tel: "",
      },
      organization: {},
      dialogVisible: false,
      isShowMap: false,
      LocationInfo: true, //判断是否从地图选的经纬度
      activeNames: ["1", "2"],
      editForm: {
        id: "",
        orgName: "",
        flatType: "",
        username: "",
        mobile: "",
        lat: "",
        lng: "",
        province: "",
        provinceCode: "",
        city: "",
        cityCode: "",
        area: "",
        areaCode: "",
        street: "",
        streetCode: "",
        address: "",
        communityCode: "", //社区
        community: "",
        nature: "", // 组织性质
        category: "",
        homeCountry: "",
        grade: "",
        telephone: "",
        corporateName: "",
        corporateIdCard: "",
        construction: "",
        parentId: "",
        type: "",
      },
      parentId: "",
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getOrgSuperLevelInfo();
      }
    },
  },
  methods: {
    // 查询上级组织机构信息
    async getOrgSuperLevelInfo() {
      this.parentId = this.editOrgInfo.parentId || 0;
      if (!this.editOrgInfo.parentId || this.parentId==0) return;
      const res = await reqOrgSuperLevelInfo(this.editOrgInfo.parentId);
      this.orgSupInfo = res.data.row;
      if (this.orgSupInfo.type == "1") {
        this.orgSupInfo.typeName = "联网单位";
      } else if (this.orgSupInfo.type == "2") {
        this.orgSupInfo.typeName = "维保单位";
      } else if (this.orgSupInfo.type == "3") {
        this.orgSupInfo.typeName = "监管单位";
      } else if (this.orgSupInfo.type == "4") {
        this.orgSupInfo.typeName = "经销商";
      } else if (this.orgSupInfo.type == "5") {
        this.orgSupInfo.typeName = "工程商";
      } else if (this.orgSupInfo.type == "6") {
        this.orgSupInfo.typeName = "代理商";
      }
    },
    handleChange(val) {
      // console.log(val);
    },
    changeOrgId(id) {
      // console.log(id);
      this.editForm.parentId = id;
    },
    // 根据省查询市
    async changprovince(val) {
      this.LocationInfo = false;
      this.editForm.address = "";
      this.cityList = [];
      this.editForm.city = "";
      this.editForm.cityCode = "";
      this.areaList = [];
      this.editForm.area = "";
      this.editForm.areaCode = "";
      this.streetList = [];
      this.editForm.street = "";
      this.editForm.streetCode = "";
      this.communityList = [];
      this.editForm.community = "";
      this.editForm.communityCode = "";
      const res = await reqRegionLevel(val);
      this.cityList = res.data.rows;
      this.provinceList.forEach((item) => {
        if (item.regionCode == val) {
          this.editForm.province = item.regionName;
          return;
        }
      });
    },
    // 根据市查询区
    async changcity(val) {
      this.LocationInfo = false;
      this.editForm.address = "";
      this.areaList = [];
      this.editForm.area = "";
      this.editForm.areaCode = "";
      this.streetList = [];
      this.editForm.street = "";
      this.editForm.streetCode = "";
      this.communityList = [];
      this.editForm.community = "";
      this.editForm.communityCode = "";
      const res = await reqRegionLevel(val);
      this.areaList = res.data.rows;
      this.cityList.forEach((item) => {
        if (item.regionCode == val) {
          this.editForm.city = item.regionName;
          return;
        }
      });
    },
    // 根据区查询街道
    async changarea(val) {
      this.LocationInfo = false;
      this.editForm.address = "";
      this.streetList = [];
      this.editForm.street = "";
      this.editForm.streetCode = "";
      this.communityList = [];
      this.editForm.community = "";
      this.editForm.communityCode = "";
      const res = await reqRegionLevel(val);
      this.streetList = res.data.rows;
      this.areaList.forEach((item) => {
        if (item.regionCode == val) {
          this.editForm.area = item.regionName;
          return;
        }
      });
    },
    // 街道名字赋值
    async changestreet(val) {
      this.communityList = [];
      this.editForm.community = "";
      this.editForm.communityCode = "";
      const res = await reqRegionLevel(val);
      this.communityList = res.data.rows;
      this.streetList.forEach((item) => {
        if (item.regionCode == val) {
          this.editForm.street = item.regionName;
          return;
        }
      });
    },
    // 社区名称赋值
    changecommunity(val) {
      this.communityList.forEach((item) => {
        if (item.regionCode == val) {
          this.editForm.community = item.regionName;
          return;
        }
      });
    },
    // 省市区获取
    openMap() {
      this.isShowMap = true;
      if (this.editForm.lng == "") {
        this.reqUrl = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53&referer=精卫安管理系统&policy=1`;
      } else {
        this.reqUrl = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53&referer=精卫安管理系统&policy=1&coord=${this.editForm.lng},${this.editForm.lat}`;
      }
    },
    // 查询省级行政组织
    async getRegion() {
      const res = await reqRegion();
      res.data.rows.forEach((item) => {
        if (item.regionName == this.editForm.province) {
          this.editForm.provinceCode = item.regionCode; //省行政码
          return;
        }
      });
      this.getRegionLevel();
    },
    // 查询省级下行政组织
    async getRegionLevel() {
      const res = await reqRegionLevel(this.editForm.provinceCode);
      this.cityList = res.data.rows;
      res.data.rows.forEach((item) => {
        if (item.regionName == this.editForm.city) {
          this.editForm.cityCode = item.regionCode; //市行政码
          return;
        }
      });
      // 特殊市辖区查不到  默认选择第一个
      if (this.editForm.cityCode == "") {
        this.editForm.city = res.data.rows[0].regionName;
        this.editForm.cityCode = res.data.rows[0].regionCode;
      }

      const res2 = await reqRegionLevel(this.editForm.cityCode);
      this.areaList = res2.data.rows;
      if (this.editForm.area == "") return; //地图中没获取到区级不走下面
      res2.data.rows.forEach((item) => {
        if (item.regionName == this.editForm.area) {
          this.editForm.areaCode = item.regionCode; //区行政码
          return;
        }
      });

      //   if (this.editForm.areaCode == "" || this.editForm.areaCode == null)
      //     return this.$modal.notifyWarning("数据异常，请联系管理员");
      const res3 = await reqRegionLevel(this.editForm.areaCode);
      this.streetList = res3.data.rows;
      if (this.editForm.street == "") return; //地图中没获取到街道不走下面
      res3.data.rows.forEach((item) => {
        if (item.regionName == this.editForm.street) {
          this.editForm.streetCode = item.regionCode; //街道行政码
          return;
        }
      });

      const res4 = await reqRegionLevel(this.editForm.streetCode);
      this.communityList = res4.data.rows;
      if (this.editForm.community == "") return;
      res4.data.rows.forEach((item) => {
        if (item.regionName == this.editForm.community) {
          this.editForm.communityCode = item.regionCode;
          return;
        }
      });
    },

    // 查询省级行政组织
    async RegionList() {
      const res = await reqRegion();
      this.provinceList = res.data.rows;
    },
    // 市
    cityArr() {
      this.$nextTick(async () => {
        if (
          this.editForm.provinceCode == null ||
          this.editForm.provinceCode == ""
        )
          return;
        const res = await reqRegionLevel(this.editForm.provinceCode);
        this.cityList = res.data.rows;
      });
    },

    // 区
    areaArr() {
      this.$nextTick(async () => {
        if (this.editForm.cityCode == null || this.editForm.cityCode == "")
          return;
        const res = await reqRegionLevel(this.editForm.cityCode);
        this.areaList = res.data.rows;
      });
    },

    // 街道
    RegionLevelList() {
      this.$nextTick(async () => {
        if (this.editForm.areaCode == null || this.editForm.areaCode == "")
          return;
        const res = await reqRegionLevel(this.editForm.areaCode);
        this.streetList = res.data.rows;
      });
    },

    // 社区
    communitylList() {
      this.$nextTick(async () => {
        if (this.editForm.streetCode == null || this.editForm.streetCode == "")
          return;
        const res = await reqRegionLevel(this.editForm.streetCode);
        this.communityList = res.data.rows;
      });
    },

    // 点击编辑
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        //  this.$modal.notifyWarning("请检查输入信息是否有误");
        if (!valid) return;
        let {
          id,
          orgName,
          lat,
          lng,
          province,
          provinceCode,
          city,
          cityCode,
          area,
          areaCode,
          street,
          streetCode,
          community,
          communityCode,
          address,
          flatType,
          nature, // 组织性质
          category,
          homeCountry,
          grade,
          telephone,
          corporateName,
          corporateIdCard,
          construction,
          type,
          mobile,
          username,
        } = this.editForm;
        if (!streetCode) return this.$modal.notifyWarning("请选择地区");
        let params = {
          id,
          tenantId: this.user.tenantId,
          orgName,
          lat,
          lng,
          province,
          provinceCode,
          city,
          cityCode,
          area,
          areaCode,
          street,
          streetCode,
          community,
          communityCode,
          address,
          flatType,
          nature, // 组织性质
          category,
          homeCountry,
          grade,
          telephone,
          corporateName,
          corporateIdCard,
          construction,
          type,
          mobile,
          username,
        };
        const res = await reqOrgEdit(params);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("编辑成功");
        this.$parent.Region();
        this.$parent.loadChildren2(this.editOrgInfo.parentId);
        this.closeDialog();
      });
    },
    //地址转经纬度
    addrHand() {
      let that = this;
      // console.log(that.editForm.province + that.editForm.city + that.editForm.area + that.editForm.address);
      $.ajax({
        type: "get",
        dataType: "jsonp",
        data: {
          key: "44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53", // 填申请到的腾讯key
          address:
            that.editForm.province +
            that.editForm.city +
            that.editForm.area +
            that.editForm.street +
            that.editForm.address, //具体的地址
          output: "jsonp", //返回格式：支持JSON/JSONP，默认JSON
        },
        jsonp: "callback",
        jsonpCallback: "QQmap",
        url: "https://apis.map.qq.com/ws/geocoder/v1/?",
        success: function (json) {
          // console.log(json)
          if (json.status == 0) {
            that.editForm.lng = json.result.location.lng;
            that.editForm.lat = json.result.location.lat;
            // console.log(that.editForm.lat);
            // console.log(that.editForm.lng);
            // that.$message({
            //   message: '成功获取位置的经纬度',
            //   type: 'success'
            // })
          } else {
            // that.$message.error('获取该位置经纬度失败')
          }
        },
        error: function (err) {
          // that.$message.error('异常错误，请刷新浏览器后重试')
        },
      });
    },
    // 点击关闭弹框
    closeDialog() {
      this.$refs.refForm.resetFields();
      this.dialogVisible = false;
      this.areaList = [];
      this.streetList = [];
      this.cityList = [];
      this.communityList = [];
      this.editForm = {
        id: "",
        orgName: "",
        flatType: "",
        parentId: "",
        username: "",
        mobile: "",
        lat: "",
        lng: "",
        province: "",
        provinceCode: "",
        city: "",
        cityCode: "",
        area: "",
        areaCode: "",
        street: "",
        streetCode: "",
        address: "",
        communityCode: "", //社区
        community: "",
        nature: "", // 组织性质
        category: "",
        homeCountry: "",
        grade: "",
        telephone: "",
        corporateName: "",
        corporateIdCard: "",
        construction: "",
        type: "",
      };
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../common.less");

.mapLoc {
  height: 60vh;
  width: 100%;
  overflow-y: hidden;

  .iframe {
    width: 100%;
    height: 100%;
  }
}

.zuobiao {
  color: @primaryTxtcolor;
}

// ::v-deep .el-textarea__inner {
//   color: #ececed !important;
// }
// 省市区/
::v-deep .el-input.is-disabled .el-input__inner {
  border-color: @primaryBorderColor !important;
}

// 折叠样式
.el_collapse {
  color: @primaryThemeTxtColor2;
}

::v-deep .el-collapse-item__header {
  // color: @primaryThemeTxtColor2;
  color: #7367f0 !important;
  width: 100px;
  height: 45px;
  line-height: 45px;
}

.el-collapse {
  border: none;
}

::v-deep .el-collapse-item__arrow {
  margin: 0;
}

::v-deep .el-collapse-item__content {
  padding-bottom: 0;
}

::v-deep .el-collapse-item__wrap {
  background: transparent;
}

.title {
    color:  @primaryFFFColor2;
}

// 折叠样式结束
</style>
